<script setup lang="ts">
import { useAxios } from '@vueuse/integrations/useAxios'
import { ref, reactive, onMounted } from 'vue';
import {getHttpList} from '@http'
// import ToList from './components/ToList/index'
interface TODOS {
  id?: string | number,
  name: string
}
const state = reactive<{list: TODOS[]}>({list: []})
const removeItem = (index: number) => {
  state.list.splice(index, 1)
}
const addItem = () => {
  const i = <number>state.list[state.list.length - 1].id
  state.list.unshift({
    id: i + 1,
    name: 'aaaa'
  })
}
onMounted(() => {
  getHttpList().then(res => {
    console.log(res);
    const _list = res.data.list
    state.list = _list
  })
})

const { data, isLoading, isFinished, execute } = useAxios(
  '/api/list',
)
const open = () => {
  execute()

}
</script>

<template>
  <a-button type="primary" @click="addItem">add</a-button>
  <ToList :list="state.list" @removeItem="removeItem"/>
  <button @click="open">
    Execute
  </button>
  <note>Loading: {{ isLoading.toString() }}</note>
  <note>Finished: {{ isFinished.toString() }}</note>
  <pre lang="yaml">{{ data }}</pre>
</template>